<template>
  <div class="warning-type">
    <div class="head"></div>
    <div class="frequency">
      <div class="frequency-item" :class="{
        active: activeFrequency === 0
      }" @click="toDay(0)">今</div>
      <div class="frequency-item" :class="{
        active: activeFrequency === 1
      }" @click="toWeek(7)">周</div>
      <div class="frequency-item" :class="{
        active: activeFrequency === 2
      }" @click="toMonth(30)">月</div>
    </div>
    <div ref="chartEl" class="pie-chart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import {toDayWarn,analysisResult, hospitalNationList,warnList, getWarnType,getWarnTypeNum} from "@/api/his/screen";
export default {
  name: "WarningType",
  data() {
    return {
      // dataInfo: [
      //   { value: 40, name: '无菌处方权1' },
      //   { value: 38, name: '无菌处方权2' },
      //   { value: 32, name: '无菌处方权3' },
      //   { value: 30, name: '无菌处方权4' },
      //   { value: 28, name: '无菌处方权5' },
      //   { value: 26, name: '无菌处方权6' },
      //   { value: 22, name: '无菌处方权7' },
      //   { value: 18, name: '无菌处方权8' }
      // ],
	  dataInfo:[
		  {"name":"执业许可证逾期预警","value":0},
		  {"name":"儿科超范围预警","value":1},
		  {"name":"校验逾期预警","value":0},
		  {"name":"无抗菌药物处方权预警","daykeys":0,"gid":23,"value":0},
		  ],
      activeFrequency: 0,
      chartInstance: null
    };
  },
  watch: {
    dataInfo(){
      this.initChart()
    }
  },
  created() {
        this.toDay(0);
  },
  methods: {
	  	toDay(day) {
			// this.dataInfo = response.data
			// alert(JSON.stringify(this.dataInfo ))
			getWarnTypeNum({'days':day}).then(response => {
				if(response.code ==200){
					this.activeFrequency = 0
					this.chartInstance = null
					this.dataInfo = response.data
					// alert(JSON.stringify(this.dataInfo ))
				}
			});
		},
		toWeek(day) {
			getWarnTypeNum({'days':day}).then(response => {
				if(response.code ==200){
					this.activeFrequency = 1
					this.chartInstance = null
					this.dataInfo = response.data
					// alert(JSON.stringify(this.dataInfo )+'!!')
				}
			});
		},
		toMonth(day) {
			getWarnTypeNum({'days':day}).then(response => {
				if(response.code ==200){
					this.activeFrequency = 2
					this.chartInstance = null
					this.dataInfo = response.data
					// alert(JSON.stringify(this.dataInfo )+'**')
				}
			});
		},
    initChart() {
      if (!this.chartInstance) {
        this.chartInstance = echarts.init(this.$refs.chartEl)
      }
      const that = this
      this.chartInstance.setOption({
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: that.dataInfo,
            labelLine: {
            },
            labelLayout: {
              moveOverlap: 'shiftX',
              hideOverlap: true
            },
            label: {
              normal: {
                overflow: 'none'
              }
            }
          }
        ]
      }, { notMerge: true })
    },
  },
  mounted() {
    window.addEventListener('resize', this.resizeChart)
    this.initChart()
  },
  beforeDestroyed() {
    this.chartInstance?.dispose()
    this.chartInstance = null
    window.removeEventListener('resize', this.resizeChart)
  }
};
</script>
<style lang="scss" scoped>
.warning-type {
  display: flex;
  flex-direction: column;

  .head {
    width: 418px;
    height: 28px;
    background-image: url("~@/assets/images/home/warning-type.png");
    margin-bottom: 29px;
    background-repeat: no-repeat;
  }

  .frequency {
    display: flex;
    width: 126px;
    height: 34px;
    border-radius: 17px;
    background: #FFFFFF;
    justify-content: space-around;
    align-items: center;

    .frequency-item {
      text-align: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      color: #393939;
      font-size: 16px;
      font-weight: 500;
      line-height: 28px;
      cursor: pointer;
    }

    .active {
      background: #4373F1;
      color: #FFFFFF;
    }
  }

  .pie-chart {
    flex: 1;
    min-height: 300px;
    padding: 40px;
  }
}
</style>
